<template>
	<div :class="[{'defaultUl' : show} ,'menus','swiper']">
		<ul class="swiper-wrapper">
			<li v-for="item in menus" :key="item.type" class="swiper-slide">{{item.typeName}}</li>
		</ul>
	</div>
</template>

<script>
	import Swiper ,{
		EffectCoverflow,
		EffectCube,
	} from 'swiper'
	Swiper.use(EffectCoverflow,EffectCube)
	export default{
		name:'Menus',
		data(){
			return{
				menus:[],
				swiperList:'',
				show:false
			}
		},
		//组件创建之后发起异步请求
		created() {
			this.getMenus();
		},
		mounted() {
			let timer;
			let flag=true	//判断是否打开滚动监听的函数
			window.addEventListener('scroll' ,()=>{
				//设置定时器
				if(flag){
					this.fiexMenus()
				}
				//关闭开关
				flag=false;
				//清除定时器
				clearTimeout(timer);
				//设置定时器，每隔15毫秒，打开一次开关
				timer = setTimeout( ()=>{flag = true} ,20)
				
			},true)
		},
		methods:{
			fiexMenus(){
				//当前区域距离窗口左上角的纵坐标
				// console.log(window.pageYOffset);
				// //当前滚动条的纵向坐标
				// console.log(document.documentElement.scrollTop);
				let sTop =window.pageYOffset || document.documentElement.scrollTop;
				sTop >=2000 ? (this.show =true) : (this.show =false)
				
				//下滑更新 ： 1.获取当前滚动条的位置以及当前网页的高度 + 设备高度  2.监听滚动事件：高度的获取，以及如果滚动条到达底部，发起一个新的异步请求
				/*
					1.监听滚动事件：获取高度，判断高度是否到达底部====> 调用异步请求函数
					2.异步函数内：默认发起第一页的请求page=1,页码就需要自增+1，当滚动事件发生并且达到底部，发起page的请求数据
					3.整理获取数据
				*/
			},
			getMenus(){
				this.axios.get("https://m.youxiake.com/api/m/index/part?uid=&sitecode=1&city_id=1&refreshCount=13").then( (res)=>{
					//获取菜单栏的数据
					this.menus=res.data.data.flowTabList;
					
				}).catch( (error)=>{
					console.log(error)
				})
			},
			//滑动
			MenusSwiper(){
				this.swiperList=new Swiper('.menus' ,{
					slidesPerView : 6.5,
					centeredSlides :true,
					centeredSlidesBounds:true,
					slideToClickedSlide :true,
				})
			},
			//必须要循环
			getImg( imgurl ){
				if( imgurl !='' ){
					//去掉http://和https://
					let url=imgurl.substring( 8 );
					return 'https://images.weserv.nl?url='+url;
				}
			}
		}
	}
</script>

<style scoped>
	.menus{
		background-color: #f5f5f5;
		padding-top: 0.25rem;
		padding-bottom: 0.2rem;
		height: 1rem;
	}
	.menus ul{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.menus ul li{
		font-size: 0.35rem;
		width: 1.5rem;
		text-align: center;
		height: 0.8rem;
		line-height: 0.8rem;
	}
	.defaultUl{
		position: fixed !important;
		 top: 0;
		 left: 0;
		 right: 0;
		 z-index: 100;
	}
</style>
